<template>
    <div class="book-item">
        <div class="head">
            <div class="left">
                <img class="shop" src="@/static/images/common/shop.png" />
                <p class="name">{{ item.studyhallName }}</p>
            </div>
            <p class="create-time">{{ formatTime(item.formatTime) }}</p>
        </div>
        <div class="status" v-if="item.status === 0">
            <u-icon name="error-circle" color="#fa6400" size="14"></u-icon>
            <span class="desc">预约成功后，请凭预约电话参观</span>
        </div>
        <div class="sub-list">
            <div class="sub-item">
                <span class="label">访问事由</span>
                <span class="value">{{ item.remarks }}</span>
            </div>
            <div class="sub-item">
                <span class="label">访问信息</span>
                <span class="value">{{ item.name }} {{ formatDate(item.visitDate) }}</span>
            </div>
            <div class="sub-item">
                <span class="label">商家电话</span>
                <span class="value">{{ item.studyhallPhone }}</span>
            </div>
            <div class="mask" v-if="item.status">
                <img
                    class="image"
                    src="@/static/images/book/finish.png"
                    v-if="item.status === 1 || item.status === 2"
                />
                <img class="image" src="@/static/images/book/cancel.png" v-if="item.status === 3" />
            </div>
        </div>
        <div class="footer" v-if="!complete">
            <u-button
                color="#FF5518"
                size="small"
                text="取消预约"
                plain
                shape="circle"
                :customStyle="{ width: '152rpx', margin: 0 }"
                @click="cancelOrder"
            ></u-button>
        </div>
    </div>
</template>

<script>
import dayjs from 'dayjs';
export default {
    name: 'BookItem',
    props: {
        item: {
            type: Object,
            default: () => {
                return {};
            },
        },
        complete: {
            type: Boolean,
            default: () => {
                return false;
            },
        },
    },
    methods: {
        formatTime(val) {
            return dayjs(val).format('YYYY-MM-DD HH:mm:ss');
        },
        formatDate(val) {
            return dayjs(val).format('YYYY-MM-DD');
        },
        cancelOrder() {
            let that = this;
            uni.showModal({
                title: '提示',
                content: '您确定要取消预约吗？',
                success(res) {
                    if (res.confirm) {
                        that.$Api.study.visitor.cancel(that.item.id).then(() => {
                            uni.showToast({
                                title: '取消成功',
                                icon: 'none',
                            });
                            that.$emit('refresh');
                        });
                    }
                },
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.book-item {
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    background: #fff;
    border-radius: 24rpx;
    position: relative;
    .head {
        border-bottom: 1rpx solid #e5e5e5;
        @include flexBox(space-between, center);
        .left {
            @include flexBox(flex-start, center);
            .shop {
                width: 48rpx;
                height: 48rpx;
            }
            .name {
                padding: 20rpx 0;
                font-weight: 600;
                color: #2f2f2f;
                font-size: 24rpx;
                margin-left: 20rpx;
            }
        }
        .create-time {
            font-size: 24rpx;
            color: #5c5c5c;
        }
    }
    .status {
        margin-top: 20rpx;
        background: rgba(255, 235, 189, 0.2);
        padding: 10rpx;
        color: #fa6400;
        font-size: 24rpx;
        @include flexBox(flex-start, center);
        .desc {
            margin-left: 10rpx;
        }
    }
    .sub-list {
        margin-top: 20rpx;
        .sub-item {
            margin: 12rpx;
            .label {
                font-size: 28rpx;
                color: #898989;
            }
            .value {
                font-size: 28rpx;
                color: #2f2f2f;
                margin-left: 30rpx;
            }
        }
    }
    .footer {
        @include flexBox(flex-end);
    }
    .mask {
        width: 124rpx;
        height: 124rpx;
        position: absolute;
        right: 20rpx;
        bottom: 20rpx;
        .image {
            width: 100%;
            height: 100%;
        }
    }
}
</style>
